<template>
  <div>
    <el-card style="width:100%;height:calc(100vh - 40px);">
      <p>操作日志</p>
      <div class="searchArea flex">
        <el-form ref="serachForm" :model="searchForm" :inline="true">
          <el-form-item prop="str" style="width:15%">
            <el-input v-model="searchForm.str" placeholder="搜索操作人、日志详情">
              <i slot="suffix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="origin" style="width:12%">
            <el-select v-model="searchForm.origin" placeholder="来源"></el-select>
          </el-form-item>
          <el-form-item prop="firstLevel" style="width:12%">
            <el-select v-model="searchForm.firstLevel" placeholder="一级功能模块"></el-select>
          </el-form-item>
          <el-form-item prop="secondLevel" style="width:12%">
            <el-select v-model="searchForm.secondLevel" placeholder="二级功能模块"></el-select>
          </el-form-item>
          <el-form-item prop="action" style="width:12%">
            <el-select v-model="searchForm.action" placeholder="执行动作"></el-select>
          </el-form-item>
          <el-form-item prop="timeRange">
            <el-date-picker
              v-model="searchForm.timeRange"
              clearable
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item prop="action" style="width:5%">
            <el-button size="medium" type="primary" @click='getLogsList'>搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="tableBox">
        <el-table :data="tableData" style="width: 100%" height="500" stripe>
          <el-table-column prop="source" label="来源"  align="center"></el-table-column>
          <el-table-column prop="module" label="功能模块"  align="center"></el-table-column>
          <el-table-column prop="userId" label="操作人"  align="center"></el-table-column>
          <el-table-column prop="createTime" label="操作时间"  align="center"></el-table-column>
          <el-table-column prop="ip" label="IP地址"  align="center"></el-table-column>
          <el-table-column prop="operatType" label="执行动作"  align="center"></el-table-column>
          <el-table-column prop="operatExplain" label="操作详情"  align="center"></el-table-column>
        </el-table>
        <el-pagination
          style="text-align:center;margin-top:20px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  ROLES,
  UPDATE_ROLE,
  OPERATE_LIST
} from '@/utils/api';
import { formatDate } from '@/utils/validate.js';
import { Message } from 'element-ui'
export default {
  data() {
    return {
      searchForm: {
        str: "",
        origin: "",
        firstLevel: "",
        secondLevel: "",
        action: "",
        timeRange:[]
      },
      tableData: [
        
      ],
      currentPage: 1,
      pageSize: 10,
      total: 50
    };
  },
  filters: {
      formatDate(time) {
          var date = new Date(time*1000);
          return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
      }
    },
  methods: {
    getLogsList(){
      if(this.searchForm.timeRange==null){
        this.$message.info('请填写时间')
        return
      }
      OPERATE_LIST({ 
          userId: this.searchForm.str,
          operatType: this.searchForm.origin,
          module:this.searchForm.firstLevel,
          source:this.searchForm.secondLevel,
          pageNo: this.currentPage,
          pageSize: this.pageSize,
          startTime:new Date(this.searchForm.timeRange[0]).getTime()/1000,
          endTime:new Date(this.searchForm.timeRange[1]).getTime()/1000
        }).then(res => {
          this.loading = false
          this.tableData = res.data.dataList
          this.total = res.data.count
      })
    },
    handleSizeChange(val) {
      this.pageSize=val
      this.getLogsList()
    },
    handleCurrentChange(val) {
      this.currentPage=val
      this.getLogsList()
    }
  }
};
</script>

<style lang="scss" scoped>
p {
  margin-top: 50px;
  padding: 10px 0;
  border-top: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
}
.searchArea {
  width: 100%;
  margin-top: 15px;
  justify-content: flex-start;
}
.tableBox {
  width: 100%;
  background: #fff;
  padding: 10px 2px;
  border-radius: 5px;
}
</style>